<template>
  <div class="upgoods">
    <div class="upgoods_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div>
            <el-select
              style="margin-right:10px"
              v-model="fields"
              clearable
              size="mini"
              placeholder="请选择排序"
              @change="SelectChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-radio-group v-model="type" size="mini" @change="typeChange">
              <el-radio-button label="1">升序</el-radio-button>
              <el-radio-button label="2">降序</el-radio-button>
            </el-radio-group>
          </div>
          <div class="taber">
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部商品" name="1"> -->
            <div class="promotiontable">
              <div>
                <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%"
                  :cell-style="rowClass"
                  :header-cell-style="headClass"
                  ref="singleTable"
                  @current-change="handleCurrentChange2"
                  highlight-current-row
                >
                  <!-- <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                      >
                        <el-form-item label="备注">
                          <span>{{ props.row.remarks }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column> -->
                  <!-- fixed -->
                  <el-table-column prop="id" label="ID">
                    <template slot-scope="scope">
                      <div>{{ scope.row.id }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="phone" label="账号">
                    <template slot-scope="scope">
                      <div>{{ scope.row.phone }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="time" label="注册时间">
                    <template slot-scope="scope">
                      <div style="text-align:center">
                        {{ scope.row.create_at }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="today_count" label="今日上单商品数">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.today_count }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="apply_today_count"
                    label="今日被申请商品数"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.apply_today_count }}</div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="all_count" label="上单商品总数 ">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.all_count }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="apply_all_count"
                    label="被申请商品总数"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.apply_all_count }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="today_hour_num" label="今日商品销量数">
                    <template slot-scope="scope">
                      <div>{{ scope.row.today_hour_num }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="all_hour_num" label="商品销量总数">
                    <template slot-scope="scope">
                      <div>{{ scope.row.all_hour_num }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="action" label="操作">
                    <!-- <template slot="header" slot-scope="scope">
                      <el-input
                        v-model="searchipt"
                        size="mini"
                        placeholder="输入关键字搜索"
                      />
                    </template> -->
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="lookinfo(scope.row)"
                        type="text"
                        size="small"
                      >
                        查看详情
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="text-align: right;">
              <!-- 分页器 -->
              <!-- @size-change="handleSizeChange" -->
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                background
                :page-size="30"
                :pager-count="5"
                layout="total, prev, pager, next, jumper"
                :total="count"
              >
                <!-- :page-sizes="[100, 200, 300, 400]" -->
              </el-pagination>
            </div>
            <!-- </el-tab-pane> -->
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPreStaData
  // getGoodsDetail,
  // editGoodsInfo,
  // soldOutGoods,
  // editInfoGoods
} from "@/api/mageback/mageback";

export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "upgoods",
  data() {
    return {
      type: "",
      fields: "",
      count: 0,
      currentPage: 1,
      loading: false,
      // activeName: "1",
      tableData: [],
      options: [
        {
          value: "1",
          label: "今日上单商品数"
        },
        {
          value: "2",
          label: "今日被申请商品数"
        },
        {
          value: "3",
          label: "上单商品总数"
        },
        {
          value: "4",
          label: "被申请商品总数"
        },
        {
          value: "5",
          label: " 今日商品销量数"
        },
        {
          value: "6",
          label: " 商品销量总数"
        }
      ]
    };
  },

  computed: {},
  created() {
    this.getPreStaData(1, 30, "", "");
  },
  mounted() {},
  methods: {
    lookinfo(row) {
      console.log(row);
      this.$router.push({
        path: "/userinfo/upgoods",
        query: { id: row.id }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getPreStaData(this.currentPage, 30, this.type, this.field);
    },
    dosearch() {
      this.getPreStaData(1, 15, "", this.searchipt);
    },
    getPreStaData(page, pagesize, fields, type) {
      this.loading = true;
      getPreStaData({
        page: page,
        pagesize: pagesize,
        type: type !== "" ? type : undefined, //  1=升序 2降序
        fields: fields !== "" ? fields : undefined
        //排序字段 1=今日上单商品数  2今日被申请商品数 3上单商品总数4  被申请商品总数5  今日商品销量数 6商品销量总数
      })
        .then(res => {
          console.log("上单统计数据列表", res);
          this.count = res.data.count;
          this.tableData = res.data.data;
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          console.log(err);
        });
    },

    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange2(val) {
      this.currentRow = val;
    },
    // // 下拉排序选择
    SelectChange(val) {
      console.log(val);
      console.log(this.type);
      this.getPreStaData(1, 30, val, this.type);
    },
    // radio选择
    typeChange(val) {
      console.log(val);
      this.getPreStaData(1, 30, this.fields, val);
    }
    // 导航栏切换
    // handleClick() {
    //   // this.getUserGoods(1, 15, this.activeName, "");
    //   console.log("导航", this.activeName);
    // }
  }
};
</script>

<style lang="less" scoped>
.upgoods {
  // width: 970px;
  box-sizing: border-box;
  .upgoods_main {
    // width: 970px;
    .taber {
      margin-top: 10px;
    }
  }
}
</style>
